<template>
	<div >
		<div class="title" @click="test">
			热门精选
		</div>
		<div class="pic_album">
			<div class="pic_album_wrapper">
				
				<album_li v-for="(item, index) in album_info_arr" :key='index' 
				:album_info='album_info_arr[index]' 
				:index='index'
				class="album_li"></album_li>
				
			</div>
		</div>
		
		<div class="more">
			<button>更多</button>
		</div>
	</div>
</template>

<script>
	import { get_album } from '../../API/get_album.js';
	import album_li from './album_li.vue';
	export default {
		created() {
			get_album(1).then(res => {
				console.log(res);
				res.data.data.forEach(el => {
					this.album_info_arr.push({
						album_name: el.album_name,
						info: JSON.parse(el.info_obj),
						num:el.num,
					})
				})
			})
			
		},
		data(){
			return {
				album_info_arr:[],
			}
		},
		methods:{
			test(){
				console.log(this.album_info_arr)
			}
		},
		components:{
			album_li,
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		padding-top: 50px;
		font-family: "microsoft yahei";
		font-size: 24px;
		font-weight: 600;
	}
	.pic_album{
		width: 100%;
		.pic_album_wrapper{
			margin: 0 auto;
			width: 80%;
			display: flex;
			flex-wrap: wrap;
		}
	}
	.more{
		button{
			width: 162px;
			line-height: 40px;
			border-radius: 20px;
			margin: 38px auto;
		}

	}
</style>